:root {
	--totawidth: 100%;
}
html,
body {
	width: var(--totawidth);
}
/* 头部通栏 */
header {
	left: 0;
	top: 0;
	z-index: 40;
	padding: 0 20px;
	width: 100%;
	height: 66px;
	border-bottom: 1px solid #6196de;
}
/* logo图 */
header .logo {
	display: block;
	width: 138px;
	height: 66px;
}
.bl {
	height: 66px;
	background: url(../imgs/iocn/new-logo-white.png) no-repeat;
}
/* 导航列表 */
.nl {
	width: 163px;
	height: 64px;
	line-height: 64px;
}
.nl li {
	margin: 0 10px;
}
.nl li a {
	color: #fff;
}
.nl li a:hover {
	color: #e58346;
}
/* 激活样式 */
.nl .active {
	border-bottom: 1px solid #fff;
}
/* 登录按钮 */
header span {
	display: inline-block;
	border-radius: 50px;
	padding: 4px 8px;
	font-size: 12px;
}
.register {
	border: 1px solid #fff;
}
.login {
	vertical-align: 1px;
	background-color: #ed510a;
}
/* banner区 */
#banner {
	width: var(--totawidth);
	height: 602px;
}
/* 轮播图盒子 */
.swiper .swiper-wrapper .swiper-slide {
	width: 100%;
	height: 602px;
}
/* 轮播图 */
.swiper .swiper-wrapper .swiper-slide:first-child {
	background: url(../imgs/iocn/banner1.png) no-repeat;
	background-size: cover;
	background-position: center;
}
.swiper .swiper-wrapper .swiper-slide:nth-child(2) {
	background: url(../imgs/iocn/banner2.png) no-repeat;
	background-size: cover;
	background-position: center;
}
.swiper .swiper-wrapper .swiper-slide:last-child {
	background: url(../imgs/iocn/banner3.png) no-repeat;
	background-size: cover;
	background-position: center;
}
/* 云服务 */
#clone {
	width: var(--totawidth);
	height: 622px;
}
/* 标题盒子 */
#text1 {
	width: 100%;
	height: 243px;
}
/* 下方图片列表 */
.clg {
	width: 100%;
	height: 378px;
}
.clg li {
	width: 240px;
	height: 281px;
	background-color: #ffffff;
	box-shadow: 10px 10px 10px #accef9;
}
/* API */
#api {
	width: var(--totawidth);
	height: 642px;
	background-color: #f8f9fb;
	background: url(../imgs/iocn/more-api-bg.svg) no-repeat;
	background-position: center center;
	background-size: cover;
}
/* API下面的列表图片 */
.api-list {
	width: 100%;
	height: 293px;
}
.api-list li {
	width: 225px;
	height: 137px;
	line-height: 24px;
	background-position: center;
	box-shadow: 5px 5px 5px #90bbf5;
}
/* API下面的a链接 */
.an {
	color: #6196de;
}
/* 慧集区 */
#master {
	width: var(--totawidth);
	height: 763px;
}
/* 版心 */
.cw {
	display: flex;
	justify-content: space-between;
}
/* 左边图片 */
.cw-img img {
	height: 590px;
}
/* 右边列表 */
.cw-list {
	margin-top: 64px;
}
.cw-list li {
	padding: 13px 21px;
	width: 510px;
	height: 80px;
	background-color: #fbfbfd;
	line-height: 25px;
}
/* 列表精灵图 */
.cw-list li img {
	margin-right: 5px;
}
.cw-list li::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 27px;
	width: 4px;
	height: 26px;
	background-color: #1271ef;
}
/* 独角兽区 */
#unicon {
	padding-top: 100px;
	width: var(--totawidth);
	height: 566px;
}
/* 背景颜色 */
#graphic {
	margin-top: 90px;
	box-sizing: border-box;
	padding-bottom: 10px;
	width: var(--totawidth);
	height: 271px;
	background-color: #f8f9fb;
}
/* 中间版心 */
.bh {
	left: 174px;
	top: -22px;
	display: flex;
	justify-content: space-between;
	opacity: 0;
}
/* 左边图片 */
.hcfc img {
	width: 580px;
	height: 292px;
}
/* 右边文字 */
.text2 {
	width: 553px;
}
.text2 p {
	margin-top: 10px;
	line-height: 30px;
}
.text2 p:last-child {
	text-align: right;
}
.department .t1::before {
	content: "";
	position: absolute;
	right: 81px;
	top: 14px;
	display: block;
	width: 12px;
	height: 4px;
	background-color: #1271ef;
}
.department .t2::before {
	content: "";
	position: absolute;
	right: 115px;
	top: 15px;
	display: block;
	width: 12px;
	height: 4px;
	background-color: #1271ef;
}
.department .t3::before {
	content: "";
	position: absolute;
	right: 98px;
	top: 15px;
	display: block;
	width: 12px;
	height: 4px;
	background-color: #1271ef;
}
/* 数据安全 */
#safe {
	width: var(--totawidth);
	height: 440px;
}
/* 下方图标 */
.security {
	width: 150px;
	line-height: 30px;
}
/* 广告区 */
#adv {
	width: var(--totawidth);
	height: 201px;
	background-color: #1271ef;
}
.adv-box img {
	width: var(--totawidth);
}
/* 标题 */
.title-box {
	left: 480px;
	top: 48px;
	line-height: 38px;
	text-align: center;
	color: #fff;
}
/* 标题下方按钮 */
.ei {
	width: 128px;
	height: 47px;
	color: #fff;
	border: 1px solid #fff;
	background-color: rgba(0, 0, 0, 0);
}
/* 尾部 */
footer {
	width: var(--totawidth);
	height: 328px;
}
/* 尾部上方列表 */
.text3 {
	width: 722px;
	height: 200px;
}
.text3 .f-list {
	width: 100%;
	height: 14px;
}
.text3 .f-list li {
	font-size: 14px;
}
/* 尾部上方列表标题 */
.title {
	margin-bottom: 38px;
}
/* 尾部上方列表信息  */
.b-msg {
	font-size: 14px;
	line-height: 25px;
	color: #d6cfcf;
}
/* 尾部微信 */
.weix {
	display: flex;
	flex-direction: column;
	align-items: end;
	width: 106px;
	height: 178px;
}
.weix p:nth-child(2) {
	color: #cad2de;
	margin: 19px 0;
}
/* 尾部下方注释 */
.annotation {
	margin-top: 93px;
	width: 100%;
	color: #e2ddda;
}
.annotation span {
	vertical-align: 5px;
}
/* 返回顶部按钮 */
.bto {
	right: 100px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: url(../imgs/iocn/returntopicon.jpg) no-repeat;
	background-position: -163px -56px;
}
